import React from 'react'
import { Link } from 'react-router-dom'
import { Grid, Button, Modal } from 'antd-mobile'
import { BASE_URL } from 'utils/config'
import styles from './index.module.scss'
import { hasToken, removeToken } from 'utils/token'
import http from 'utils/http'

// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorite' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity',
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' },
]

// token本质上就是一个字符串(令牌)
// 1. 用户登录时, 将用户名和密码给到后台
// 2. 后台校验用户名和密码是否正确
// 3. 如果正确, 基于登录时间, 过期时间, 用户id, ... 这些信息, 加密出一个token字符串
// 4. 响应时, 将token字符串返回, 前端需要将返回的token字符串存到localStorage中
// 5. 下一次请求时, 需要携带上 token 令牌 (在请求头中携带)

class Profile extends React.Component {
  state = {
    isLogin: hasToken(),
    userInfo: {},
  }

  componentDidMount() {
    // 如果登录的用户, 获取对应的个人信息展示
    if (this.state.isLogin) {
      this.getUserInfo()
    }
  }

  async getUserInfo() {
    const res = await http.get('/user')
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        userInfo: body,
      })
    } else {
      this.setState({
        isLogin: false,
        userInfo: {},
      })
    }
    console.log(body)
  }

  logout = () => {
    Modal.alert('温馨提示', '亲, 你确认要退出么?', [
      { text: '取消' },
      {
        text: '确定',
        onPress: () => {
          removeToken()
          this.setState({
            isLogin: false,
            userInfo: {},
          })
        },
      },
    ])
  }

  render() {
    const { history } = this.props
    const { isLogin, userInfo } = this.state

    return (
      <div className={styles.profile}>
        {/* 个人信息 */}
        <div className="title">
          <img
            className="bg"
            src={BASE_URL + '/img/profile/bg.png'}
            alt="背景图"
          />
          <div className="info">
            <div className="myIcon">
              <img
                className="avatar"
                src={
                  isLogin
                    ? BASE_URL + userInfo.avatar
                    : BASE_URL + '/img/profile/avatar.png'
                }
                alt="icon"
              />
            </div>
            <div className="user">
              <div className="name">{isLogin ? userInfo.nickname : '游客'}</div>

              {isLogin ? (
                <>
                  <div className="auth">
                    <span onClick={this.logout}>退出</span>
                  </div>
                  <div className="edit">
                    编辑个人资料
                    <span className="arrow">
                      <i className="iconfont icon-arrow" />
                    </span>
                  </div>
                </>
              ) : (
                <div className="edit">
                  <Button
                    type="primary"
                    size="small"
                    inline
                    onClick={() => history.push('/login')}
                  >
                    去登录
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* 九宫格菜单 */}
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={(item) =>
            item.to ? (
              <Link to={item.to}>
                <div className="menuItem">
                  <i className={`iconfont ${item.iconfont}`} />
                  <span>{item.name}</span>
                </div>
              </Link>
            ) : (
              <div className="menuItem">
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            )
          }
        />

        {/* 加入我们 */}
        <div className="ad">
          <img src={BASE_URL + '/img/profile/join.png'} alt="" />
        </div>
      </div>
    )
  }
}

export default Profile
